<template>
  <el-form :rules="rules" ref="form" :model="form">
    <v-form-title title="调价信息"/>
    <div class="container">
      <div class="offer">
        <p class="t">报价信息</p>
        <p class="info"><span>贴现率</span><b>{{bill.billRate}}%</b></p>
        <p class="info"><span>年化率</span><b>{{bill.annualInterestRate}}%</b></p>
        <p class="info"><span>贴息额</span><b>{{bill.discountAmount}}</b></p>
        <p class="info"><span>转让额</span><b>{{bill.transferAmount}}</b></p>
        <p class="info"><span>约合每十万扣款</span><b>{{bill.billEveryDeduction}}</b></p>
      </div>
      <div class="adj">
        <p class="t">掌柜调价</p>
        <p class="info"><span>每十万加</span>
          <el-form-item prop="everyPlus">
            <el-input v-model="form.everyPlus" @input="calc(true)"></el-input>
          </el-form-item>
        </p>
        <p class="info"><span>年化率</span>
          <el-form-item prop="adjustInterestRate">
            <el-input v-model="form.adjustInterestRate" @input="calc(false)"></el-input>
          </el-form-item>
        </p>
      </div>
      <div class="res">
        <p class="t">调价信息</p>
        <p class="info"><span>年化率</span><b>{{res.interestYear}}%</b></p>
        <p class="info"><span>约合每十万扣款</span><b>{{res.billEveryDeduction}}</b></p>
        <p class="info"><span>贴息额</span><b>{{res.discountAmount}}</b></p>
        <p class="info"><span>转让额</span><b>{{res.transferAmount}}</b></p>
        <p class="info"><span>掌柜预期利润</span><b>{{res.treasurerExpectedProfit}}</b></p>
      </div>
    </div>
    <div style="text-align: center;">
      <el-button type="primary" @click="checkAdj">调价</el-button>
    </div>
  </el-form>
</template>
<script lang="ts">
  import { Component, Prop, Vue } from 'vue-property-decorator'
  import vFormTitle from '@/components/form-title'

  @Component({
    components: {
      vFormTitle
    }
  })
  export default class BillAdj extends Vue {
    @Prop({
      default: () => {}
    }) bill
    form = {
      everyPlus: '',
      adjustInterestRate: ''
    }
    rules = {
      everyPlus: [{validator: this.testAdj, trigger: 'none'}],
      adjustInterestRate: [{validator: this.testAdj, trigger: 'none'}]
    }
    res = {
      interestYear: '',
      transferAmount: '',
      billEveryDeduction: '',
      treasurerExpectedProfit: '',
      discountAmount: ''
    }

    testAdj (rule, value, cb) {
      if (this.form.adjustInterestRate === '' && this.form.everyPlus === '') {
        cb(new Error('请输入调价基数'))
        return
      }
      cb()
    }

    getResByAdjInterestRate () {
      return this.$axios.post('g/gateway/calculator/calculate', {
        interestRate: this.bill.annualInterestRate,
        adjustInterestRate: this.form.adjustInterestRate, //
        faceValue: this.bill.faceValue, //
        expiryDate: +new Date(this.bill.expiryDate), //
        adjustDay: this.bill.billType === 0 ? 0 : 3,
        transferAmount: this.bill.transferAmount,
        billEveryDeduction:this.bill.billEveryDeduction,
        biddingMethod:this.bill.biddingMethod
      })
    }

    getResByEveryPlus () {
      return this.$axios.post('g/gateway/calculator/everyplus', {
        everyPlus: this.form.everyPlus,
        faceValue: this.bill.faceValue,
        expiryDate: +new Date(this.bill.expiryDate),
        adjustDay: this.bill.billType === 0 ? 0 : 3,
        transferAmount: this.bill.transferAmount,
        billEveryDeduction:this.bill.billEveryDeduction,
        interestRate:this.bill.annualInterestRate,
        biddingMethod:this.bill.biddingMethod
      })
    }

    async calc (isEveryPlus) {
      let res = await (isEveryPlus ? this.getResByEveryPlus() : this.getResByAdjInterestRate())
      if (isEveryPlus) {
        this.form.adjustInterestRate = res.data.adjustInterestRate
      } else {
        this.form.everyPlus = res.data.everyPlus
      }
      this.res = res.data
    }

    checkAdj () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('publishAdj', this.form, this.res)
        }
      })

    }
  }
</script>
<style lang="less" scoped>
  .container {
    display: flex;
    width: 80%;
    margin: 0 auto;
    > div {
      flex: 1;
    }
    .t {
      color: #409EFF;
      line-height: 30px;
    }
    .info {
      line-height: 24px;
      span {
        color: #666666;
        margin-right: 24px;
      }
      b {
        color: #333;
      }
    }
  }

  .el-input {
    width: 100px !important;
    flex: 1;
  }
</style>
